<script setup lang='ts'>
import dayjs from 'dayjs';
import MatchStatistics from './MatchStatistics.vue';
type ISportsMyBetSlipItemWithShowRe = {
    [K in keyof ISportsMyBetSlipItem]: K extends 'bi' ? Array<{
        showResult: boolean
        result: IBasePanelType
        betMarketName: string
        ono: string
    } & ISportsMyBetSlipItem['bi'][number]> : ISportsMyBetSlipItem[K];
}
type ISportsMyBetSlipItemBi = ISportsMyBetSlipItemWithShowRe['bi'][number]

interface Props {
    data: ISportsMyBetSlipItem
    isDialog?: boolean
    /**
     * @description 是否隐藏赛果
     */
    disableResult?: boolean
}

const props = withDefaults(defineProps<Props>(), {
    disableResult: false,
})

const { t } = useI18n()
const { currentGlobalCurrency } = storeToRefs(useAppStore())
const { userInfo } = storeToRefs(useAppStore())

const betSlipStatusText: { [t: number]: string } = {
    2: t('dealing'),
    3: t('reject'),
    4: t('cancel'),
}
const settledStatus: { [t: number]: string } = {
    0: t('sports_active'),
    1: t('win_label'),
    2: t('lose'),
    3: t('sports_status_tie'),
    4: t('sports_status_win_half'),
    5: t('sports_status_lose_half'),
    6: t('sports_status_lose_part'),
}
/** 添加开关赛果 */
const slipData = ref<ISportsMyBetSlipItemWithShowRe & { ono: string }>(addShowResult(props.data))

const isNotSettled = computed(() => slipData.value.os === 0) // 未结算
const isSettled = computed(() => slipData.value.os === 1) // 已结算
const statusClass = computed(() => {
    if (isSettled.value)
        return slipData.value.oc === 1 || slipData.value.oc === 3 ? 'green' : 'grey'
    return 'grey'
})
const statusText = computed(() => {
    if (isSettled.value)
        return settledStatus[slipData.value.oc]
    return betSlipStatusText[slipData.value.os]
})
// 是否已经开赛
function checkIsStarted(ts: number) {
    return dayjs().isAfter((ts * 1000))
}

function makeMarketInfo(item: any) {
    switch (item.bt) {
        case 1:
            return item.sn.includes(item.hdp) ? item.sn : `${item.sn} (${item.hdp})`
        case 2:
            return item.sn.includes(item.hdp) ? item.sn : `${item.sn} ${item.hdp}`
        default:
            return item.sn
    }
}

function addShowResult(origin: ISportsMyBetSlipItem) {
    const copyData = cloneDeep(origin)
    copyData.bi = copyData.bi.map((a: ISportsMyBetSlipItemBi) => {
        return {
            ...a,
            showResult: false,
            result: {
                startTime: timeToDateWithDayFormat(a.ed),
                homeTeamName: a.htn,
                awayTeamName: a.atn,
                remark: '',
                homeTeamScore: a.hp,
                awayTeamScore: a.ap,
                atpic: a.atpic,
                htpic: a.htpic,
                spic: a.spic,
                si: a.si,
                pol: a.pol,
            },
            betMarketName: makeMarketInfo(a),
        }
    })
    return copyData
}

</script>

<template>
    <div class="rounded overflow-hidden mt-4">
        <div class="flex justify-between bg-[#323738] text-center font-semibold">
            <div class="flex-1 py-3 text-left px-2 flex items-center">
                <span v-if="!isNotSettled" class="status" :class="[statusClass]">
                    {{ statusText }}
                </span>
                <span> {{ timeToFormatDiffOnChinese(slipData.bt) }}</span>
            </div>
            <div class="py-3 px-4 text-[0.875rem]">
                <BaseIcon name="uni-share-slip" />
            </div>
        </div>
        <div class="bg-[#3A4142] text-xs px-2 font-semibold">
            <div v-for="biItem in slipData?.bi">
                <div class="team-name-wrap mb-1 pt-1">
                    <span v-if="biItem.et === 1" class="team-name">
                        {{ biItem.htn }} - {{ biItem.atn }}
                    </span>
                    <span v-else-if="biItem.et === 2" class="team-name">{{ biItem.cn }}</span>
                </div>
                <div class="mb-1 text-[#B3BEC1]">{{ biItem.btn }}</div>
                <div class="mb-1  flex  justify-between ">
                    <span> {{ makeMarketInfo(biItem) }}</span>
                    <span> {{ biItem?.ov ?? '' }}</span>
                </div>
                <div class="fixture-details  flex items-center justify-between text-[#B3BEC1] mb-2">
                    <!-- 已结算 -->
                    <span v-if="isSettled">
                        {{ biItem.hp }} - {{ biItem.ap }}
                    </span>
                    <!-- 已开始 -->
                    <span v-else-if="!checkIsStarted(biItem.ed)">
                        {{ timeToDateWithDayFormat(biItem.ed) }}
                    </span>
                    <span v-else></span>
                    <div @click="biItem.showResult = !biItem.showResult">
                        <BaseIcon name="uni-trend" />
                    </div>
                </div>
                <div class="mb-2">
                    <MatchStatistics
                        v-if="biItem.showResult" :round="false"
                        :data="biItem.result" :show-skeleton="biItem.m === 100"
                        style="--tg-app-match-statistics-max-width:100%;" />
                </div>
            </div>
            <div class="bg-white opacity-10 h-[1px] mb-2"></div>
            <div class="flex items-center justify-between mb-1 text-[#B3BEC1]">
                <span>赔率</span>
                <span>{{ slipData.ov }}</span>
            </div>
            <div class="flex items-center justify-between mb-1 text-[#B3BEC1]">
                <span>投注额</span>
                <span>{{ slipData.a }}</span>
            </div>
            <div class="flex items-center justify-between pb-1 text-[#B3BEC1]">
                <span>{{ isSettled ? t('盈利') : t('预计盈利') }}</span>
                <span>{{ slipData.os === 1 ? slipData.pa > 0 ? slipData.pa : 0 : slipData.mwa + slipData.a }}</span>
            </div>
        </div>
    </div>

</template>



<style lang='scss' scoped>
.status {
    border-radius: 3px;
    height: 1.25rem;
    font-size: 0.666rem;
    padding: 0.125rem 0.25rem;
    margin-right: 0.25rem;

    &.green {
        background-color: #24EE89;
    }

    &.grey {
        background-color: #b1bad3;
    }
}
</style>
